<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css" />
    <link rel="stylesheet" href="preview/css/animate.min.css" />
    <link rel="stylesheet" href="preview/css/index.css" />
    <title>大数据单模块-借还书系统</title>
</head>

<body>
<div class="sxNotice starModule">
    <div class="sxTitle">通知公告</div>
    <div class="notice-content sxBgBorder">
        <div class="sxCorner"></div>
        <div class="sxCorner"></div>
        <div class="sxCorner"></div>
        <div class="sxCorner"></div>
        <!-- 通知的内容-->
        <div class="pubNotice">
            <div class="contentItem animated">
                <p class="itemTitle fl words1">佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键</p>
                <p class="itemTime fr">2018-11-30</p>
            </div>
            <div class="itemText animated">
                <div class="wrapDiv">
                    <div class="moveDIV">
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                    </div>

                </div>
            </div>
        </div>
        <div class="pubNotice">
            <div class="contentItem animated">
                <p class="itemTitle fl words1">佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键</p>
                <p class="itemTime fr">2018-11-30</p>
            </div>
            <div class="itemText animated">
                <div class="wrapDiv">
                    <div class="moveDIV">
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                    </div>

                </div>
            </div>

        </div>
        <div class="pubNotice">
            <div class="contentItem animated">
                <p class="itemTitle fl words1">佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键</p>
                <p class="itemTime fr">2018-11-30</p>
            </div>
            <div class="itemText animated">
                <div class="wrapDiv">
                    <div class="moveDIV">
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                    </div>

                </div>
            </div>

        </div>
        <div class="pubNotice">
            <div class="contentItem animated">
                <p class="itemTitle fl words1">佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键</p>
                <p class="itemTime fr">2018-11-30</p>
            </div>
            <div class="itemText animated">
                <div class="wrapDiv">
                    <div class="moveDIV">
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                        佳都科技了的角度来讲肯德基快来讲肯德基快来讲肯德基快来讲肯德来讲肯德基快基快捷键
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="preview/js/jquery.min.js"></script>
<script src="preview/js/rem.js"></script>
<script src="preview/js/browser.js"></script>
<script src="preview/js/requestAnimationFrame.js"></script>
<script src="preview/js/prefixfree.min.js"></script>
<script src="preview/js/echarts.js"></script>
<script src="preview/js/countUp.js"></script>
<script>
    var txt_index = -1,
            div_height = null,
            div_parent = null,
            scrollTime = 0,
            sxNotice = [],
            notice_time = null,
            hSpaceTime=10,
            hHZ=myexplorer(),
            Animation=null,
            waitCountNum=0;

    window.onresize= function() {
        getRem(100, 686);
        ////初始化执行一遍动效
        ////调用不断执行动效函数 15秒执行一次
    };
    window.onload  = function() {
        getRem(100, 686);
        noticeFn();
    };
    function noticeFn(){
        $.ajax({
            type:"get",
            url:"preview/notice.json",
            dataType:"json",
            data:{},
            success:function(json){
                sxNotice=json;
                console.log(sxNotice);
                $.each(json,function(i,e){
                    $('.pubNotice:eq('+(i)+')').find('.itemTitle').html(json[i].title);
                    $('.pubNotice:eq('+(i)+')').find('.itemTime').html(json[i].time);
                    $('.pubNotice:eq('+(i)+')').find('.moveDIV').html(json[i].text);
                });
                notice_move();
            }

        })
    }

    function notice_move() {
        if(!!window.notice_time)	cancelAnimationFrame(window.notice_time);
        txt_index++;
        if(txt_index == sxNotice.length) txt_index = 0;
        var currCode= $('.pubNotice:eq('+(txt_index)+')');
//        $('<style>.currContentItem::before{background-color:#0efcff}</style>').appendTo('head');
        ////当前要展示的通知
        $(currCode).find('.itemText').addClass('pulse').css({display:"block"}).parent().siblings('.pubNotice').find('.itemText').removeClass('pulse').css({display:"none"});
        $(currCode).find('.contentItem').addClass('flipInX currContentItem').css({color:'#0efcff'}).parent().siblings('.pubNotice').find('.contentItem').removeClass('flipInX currContentItem').css({color:'#fff'});
        div_height = $(currCode).find('.moveDIV').height(); ///当前显示通知的盒子的高度
        div_parent = $(currCode).find('.wrapDiv').height();  ////父盒子高度
        //大于父容器高度让div滚动
        if(div_height > div_parent) {
            Animation=$('.moveDIV')[0].animate([
                // keyframes
                { transform: 'translate3d(0,0,0)',webkitTransform: 'translate3d(0,0,0)'},
                { transform: 'translate3d(0,-'+div_height+'px,0)',webkitTransform:'translate3d(0,-'+div_height+'px,0)'}
            ], {
                // timing options
                duration: div_height/20*1000,///滚动时间
                iterations: 1,///循环执行动画，执行次数
                delay: 5000////延迟执行动画
            });
            Animation.addEventListener("finish", function() {
                //console.log("The animation has ended.");
                notice_move();
            }, false);
            //小于||等于父容器高度时 等待10s再跳下一轮
        }else{
            waitTime();
        }

    }
    function waitTime(){
        if(!!window.notice_time)	cancelAnimationFrame(window.notice_time);
        waitCountNum++;
        if(waitCountNum >= (hSpaceTime*hHZ)){//不需要滚动的内容等待10秒钟
            waitCountNum = 0;
            notice_move();
        }else {
            window.notice_time = requestAnimationFrame(waitTime);
        }
    }

</script>

</html>